﻿<%@ Page Title="Ocilador Harmônico" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="HarmonicOscillator.aspx.cs" Inherits="PhysicalExperiments.Experiments.HarmonicOscillator" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
     <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script>
        window.requestAnimFrame = (function (callback) {
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
        })();

        //desenho da mola
        function drawSpring(canvas, context) {
            context.beginPath();
            context.moveTo(0, 0);

            for (var y = 0; y < 200; y++) {
                // Sine wave equation
                var x = 30 * Math.sin(y / 6.05);
                context.lineTo(x, y);
            }
        }

        //desenho do bloco
        function drawWeight(canvas, context) {
            var size = 100;
            context.save();
            context.fillStyle = 'blue';
            context.fillRect(-size / 2, 0, size, size);
            context.restore();
        }

        //gerar a animação
        function animate(canvas, theta, lastTime) {
            var context = canvas.getContext('2d');

            // update
            var time = (new Date()).getTime();
            var timeDiff = time - lastTime;
            theta += timeDiff / 400;
            lastTime = time;

            var scale = 0.8 * (Math.sin(theta) + 1.3);

            // clear
            context.clearRect(0, 0, canvas.width, canvas.height);

            // draw
            context.save();
            context.translate(canvas.width / 2, 0);

            context.save();
            context.scale(1, scale);
            drawSpring(canvas, context);
            context.restore();

            context.lineWidth = 6;
            context.strokeStyle = '#000000';
            // blue-ish color
            context.stroke();

            context.translate(0, 200 * scale);
            drawWeight(canvas, context);
            context.restore();

            // request new frame
            requestAnimFrame(function () {
                animate(canvas, theta, lastTime);
            });
        }

        function start() {
            var canvas = document.getElementById('myCanvas');
            var theta = 0;
            var time = (new Date()).getTime();
            animate(canvas, 0, time);
        }
        
    </script>

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    
    <div class="divParamets" style="float:left; width:46%">
        <p>Parâmetros</p>
        <asp:Label runat=server Text="Theta" ></asp:Label>
        <asp:TextBox ID="txtTheta" runat=server />
        <asp:ImageButton ID="btn_start" runat=server OnClientClick="javascript:start();return false;"/>    
    </div>

    <div class="divCanvas" style="float:left; width:46%; border:solid 1px black;">
        <canvas id="myCanvas" width="300" height="500" style="border-top:solid 4px brown"></canvas>
    </div>
       
</asp:Content>
